<script setup lang="ts">
import CornPeaItem from "@/components/CropType/CornPeaType.vue";
import PumpkinItem from "@/components/CropType/PumpkinType.vue";
import FlowersItem from "@/components/CropType/ClusterType.vue";
import {VegetableGarden} from "@/modal/VegetableGarden";
import {type Reactive, reactive} from "vue";
import GardenCrop, {Cluster, Corn, Pea, Pumpkin} from "@/modal/GardenCrop";
import Score from "@/modal/Score";
import Action from "@/modal/Action";
import Turn from "@/modal/Turn";
import {ActionName} from "@/components/type";
import {store} from "@/modal/store";
import Buff from "@/modal/Buff";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import Roll from "@/modal/roll";

const buff = reactive(Buff.getInstance());
const score = reactive(Score.getInstance());
const action = reactive(Action.getInstance());
// 0.获取菜园静态配置
const staticVG = VegetableGarden;
const cornPeaConfig = staticVG.eachCornPeaSequence;
const plotConfig = staticVG.eachPlotConfig;
const pumpkinSq = staticVG.pumpkinSequence;
const clusterSq = staticVG.clusterSequence;
// 1.为渲染HTML凸一个数据结构
const initHtml = {top: <any>[], bottom: <any>[]};
plotConfig.forEach((items, index) => {
  if (index < 3) {
    initHtml.top.push(items);
  } else {
    initHtml.bottom.push(items);
  }
});
const arrPumpkins: Pumpkin[] = reactive([]);
const arrClusters: Cluster[] = reactive([]);
const arrCorns: Corn[] = reactive([]);
const arrPeas: Pea[] = reactive([]);
// 2.创建南瓜
pumpkinSq.forEach(plot => arrPumpkins.push(new Pumpkin(plot)));
// 2.花丛实例
clusterSq.forEach(plot => arrClusters.push(new Cluster(plot)));
// 2.创建玉米和豌豆实例
cornPeaConfig.forEach((plot, i) => {
  arrCorns.push(new Corn(i, plot));
  arrPeas.push(new Pea(i, plot));
});
// 3.开启回合并初始化行动序列
const turn = new Turn();
action.setAction(turn.default);

// 4.选择骰子
const roll = new Roll(2);

// 筛选骰子选中的菜畦
function filterPlotCrop(modal: Reactive<GardenCrop>, plot: number): Reactive<GardenCrop[]> {
  let plotCrops: Reactive<GardenCrop[]> = reactive([]);
  let index = 0;
  arrPumpkins.forEach(items => items.plotIndex === plot ? plotCrops[index++] = items : "");
  arrClusters.forEach(items => items.plotIndex === plot ? plotCrops[index++] = items : "");
  arrCorns.forEach(items => items.plotIndex === plot ? plotCrops[index++] = items : "");
  arrPeas.forEach(items => items.plotIndex === plot ? plotCrops[index++] = items : "");
  return plotCrops;
}

// 解锁豌豆可种植状态
function unlockPea(modal: Reactive<Pea>, arr: Reactive<Corn[]>) {
  modal.unlockPlant(arr[modal.group].currentStep);
}

// 种植作物
function plantCrop(modal: Reactive<GardenCrop>) {
  modal.growUp();
  action.useAction(ActionName.PLANT);
}

// 南瓜和花卉成熟
function outsideCropAction(modal: Reactive<GardenCrop>) {
  if (modal.isRipen) {
    // 成熟的花丛和南瓜则触发检测
    if (modal instanceof Pumpkin) {
      // 结算南瓜刻刀分数
      if (buff.pumpkinBuff) score.getPumpkinKnifeScore(arrPumpkins);
      // 获取待激活花丛，激活花卉行动
      staticVG.getClustersSurroundByPumpkin(modal, arrPumpkins, arrClusters).forEach((cluster) => cluster.growUp());
    }
  }
}

let modal: Reactive<GardenCrop>;
// 种植
const plantPlot = (modals: Reactive<GardenCrop>): void => {
  modal = modals;
  if (action.plantTimes === 0) return;
  // 必须先激活豌豆isUnlock属性
  if (modals instanceof Pea) unlockPea(modals, arrCorns);
  if (modals.isPlant && action.plantTimes > 0) plantCrop(modals);
  outsideCropAction(modal);
};

// 灌溉
const waterPlot = () => {
  if (action.waterTimes === 0) return alert(`灌溉次数为零`);
  let plotIndex = roll.setPoint(modal.plotIndex);
  // 灌溉选中菜畦
  let noneWater = true;
  filterPlotCrop(modal, plotIndex).forEach(items => {
    if (items.isWater) {
      items.growUp();
      noneWater = false;
    }
    outsideCropAction(items);
  });
  // 全部都成熟则不消耗灌溉次数
  if (!noneWater) action.useAction(ActionName.WATER);
  else alert(`无作物可灌溉`);
};
//


</script>

<template>
  <div class="vegetable-garden">
    <div class="irrigate"
         @click="waterPlot">
      <icon-font :icon-type="IconType.IRRIGATE"
                 :color="IconColor.IRRIGATE"
                 font-size="xxx-large"></icon-font>
    </div>
    <div v-for="(itemsParent,key) in initHtml"
         :key="key"
         :class="[`plots-${key}`]"
         class="col-12 row plots">
      <div v-for="(items) in itemsParent">
        <template v-for="(childItems) in items.plotSq">
          <CornPeaItem v-if="childItems.type === 'crops'"
                       :corn="arrCorns[childItems.index]"
                       :pea="arrPeas[childItems.index]"
                       @emitGrowUp="plantPlot"
                       class="col-6">
          </CornPeaItem>
          <PumpkinItem v-else-if="childItems.type === 'pumpkin'"
                       :pumpkin="arrPumpkins[childItems.index]"
                       :index="childItems.index"
                       @emitGrowUp="plantPlot"
                       class="col-6"
          >
          </PumpkinItem>
          <FlowersItem v-else-if="childItems.type === 'flower'"
                       :cluster="arrClusters[childItems.index]"
                       :index="childItems.index"
                       @emitGrowUp="plantPlot"
                       class="col-6"
          ></FlowersItem>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.vegetable-garden {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
}

.irrigate {
  position: absolute;
  left: calc(50% - 80px);
  top: calc(50% + 20px);
}

.container > div.plots {
  display: flex;
  width: 100%;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
}

.container > div.plots-bottom {
  flex-direction: row-reverse;
}

.plots {
  height: 50%;
}

.plots > div {
  display: flex;
  height: 100%;
}

.plots > div:nth-child(3n+1) {
  width: calc(100% / 12 * 3.7);
}

.plots > div:nth-child(3n+2) {
  width: calc(100% / 12 * 3.7);
}

.plots > div:nth-child(3n+3) {
  width: calc(100% / 12 * 4.6);
}

.plots > div > * {
  height: 25%;
}

.plots > div:nth-child(3n) > * {
  width: calc(100% / 3);
  height: calc(100% / 3);
  min-height: 80px;
}

div.plots-top > div:first-child {
  flex-wrap: wrap-reverse;
}

div.plots-top > div:first-child ~ div {
  flex-wrap: wrap;
}

div.plots-bottom {
  flex-direction: row-reverse;
}

div.plots-bottom > div:first-child {
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

div.plots-bottom > div:first-child ~ div {
  flex-wrap: wrap-reverse;
  flex-direction: column-reverse;
}

</style>
